<script setup>
import router from '@/router';

//点击标签跳转规则
const changePage = (tab) => {
   switch (tab) {
      case '0':
         router.push('/main/planeTrain');
         break;
      case '1':
         router.push('/main/planeExperince');
         break;
      case '2':
         router.push('/main/planeSkydiving');
         break;
      case '3':
         router.push('/main/planeCharter');
         break;
   }
}

</script>

<template>
   <div class="PlaneSkydiving">
      <!-- 宣传图 -->
      <img src="~@/assets/banner-planeTrain.jpg" alt="">
      <!-- model-value代表默认选中的选项卡 -->
      <el-tabs @tab-change="changePage" model-value="2" type="border-card">
         <el-tab-pane aria-selected="true" label="飞行培训"></el-tab-pane>
         <el-tab-pane label="飞行体验"></el-tab-pane>
         <el-tab-pane label="跳伞飞行">
            <el-container class="content part1">
               <el-aside width="45%">
                  <p>跳伞飞行是一项充满刺激与挑战的极限运动。我们选用先进的跳伞设备和专业的教练团队，确保您在安全的环境下尽情享受跳伞的乐趣。我们的教练团队经验丰富，他们将全程陪伴您，指导您完成跳伞过程，让您在刺激中感受安全，在挑战中收获成长。
                  </p>
                  <p>项目配备经验丰富的飞行教练，为您提供一对一的专业指导，讲解飞行操作技巧，让您对飞行有更深入的了解，确保您在体验过程中能够很好地享受飞行的乐趣。</p>
                  <p>快来参加体验飞行项目，让我们一起挑战蓝天，追逐梦想，开启一段精彩的飞行之旅吧！</p>
               </el-aside>
               <el-main><img class="content-pic" src="~@/assets/parachute jump.jpg" alt=""></el-main>
            </el-container>
         </el-tab-pane>
         <el-tab-pane label="包机飞行"></el-tab-pane>
      </el-tabs>
   </div>
</template>

<style lang="less">
.PlaneSkydiving {
   margin: 0 auto;

   img {
      width: 100%;
      height: 700px;
   }

   .el-tabs {
      width: 100%;
      margin: 0;
      border: none;

      .el-container {
         width: 100%;
         height: 550px;
         padding: 50px;
         margin-bottom: 65px;
      }

      .content-pic {
         width: 100%;
         height: 100%;
         vertical-align: middle;
      }

      .el-tabs__header {
         background-color: #333;

      }

      .el-tabs__item {
         height: 55px;
         line-height: 55px;
         font-size: 16px;
      }

      /* 选项卡选中时样式 */
      .el-tabs__item.is-active {
         color: #fff;
         background-color: #cc0000;
         height: 50px;
         border: 2px solid #cc0000;
      }

      .el-aside {
            padding-top: 20px;
            padding-right: 30px;
            p {
                text-indent: 2em;
                font-size: 18px;
                margin-bottom: 25px;
            }
            img{
                width: 600px;
                height: 250px;
            }
        }

      .content:hover .el-aside h1 {
         color: #cc0000;
         /* 鼠标悬停时的颜色 */
      }
   }

}
</style>